@charset "utf-8";

/*
    Project 1
    Author: Zoe Griffith
    Date:   11/4/25
    
    Filename: csslayout.css
*/


/*
=================================================
Homepage
=================================================
*/
section.recentPosts {
    height: 450px;
    background-image: linear-gradient(#e9ccff,#dcb4fa);
    border: #e9ccff;
    border-style: groove;
}
body > section.recentPosts > nav.posts li {
    width: 33.3%;
    min-height: 100px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}
nav.posts li {
    display: block;
    float: left;
}
nav.posts a {
    color: #2A2357;
    background-image: radial-gradient(#F2E1FF, #F2E1FF, #e9ccff, #D0CCFF);
    display: block;
    font-size: 1.2em;
    line-height: 1.4em;
    text-decoration: none;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
    border: #F2E1FF;
    border-style: groove;
    height: 300px;
}



/*
=================================================
Your Content
=================================================
*/
li.post {
    background-color: #e9ccff;
    display: block;
    border: #dcb4fa;
    border-style: solid;
    border-width: 1px;
    max-width: 700px;
    min-height: 400px;
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
ul.posts > li.post > img.post {
    box-sizing: border-box;
    max-width: 300px;
    max-height: 300px;
    padding: 5px;
}
ul.posts > li.post > p {
    box-sizing: border-box;
    max-width: 500px;
    max-height: 300px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
}
li.comment {
    display: block;
    border: #dcb4fa;
    border-style: solid;
    border-width: 1px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #e9ccff;
    text-align: start;
    overflow-wrap: break-word;
}



/*
=================================================
Following
=================================================
*/
li.follower {
    background-color: #e9ccff;
    display: block;
    max-width: 70%;
    border: #dcb4fa;
    border-style: solid;
    border-width: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}
li.follower > h4, p {
    display: block;
    text-align: start;
    box-sizing: border-box;
}
img.pfp {
    float: left;
    box-sizing: border-box;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    margin-right: 5px;
    height: 5em;
    width: 5em;
}



/*
=================================================
For You
=================================================
*/
ul.fyp > li.post > img.post {
    box-sizing: border-box;
    max-width: 300px;
    max-height: 300px;
    padding: 5px;
}
ul.fyp > li.post > p {
    box-sizing: border-box;
    max-width: 500px;
    max-height: 300px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
}


/*
=================================================
About
=================================================
*/
img.invite {
    display: block;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}
p.invite {
    display: block;
    border: none;
    text-align: center;
    text-decoration: underline;
}